<template>
  <div>
    <!-- 翻译按钮 -->
    <el-button
      v-if="placement === 'start'"
      :color="translateConfig.color()"
      :icon="translateConfig.icon()"
      circle
      class="translate-button"
      size="small"
      @click="translateHandle()"
    />
  </div>
</template>

<script setup lang="ts">
import { LanguageTranslator, LineLoading } from '@vben/icons';
import { $t } from '@vben/locales';

import { Delete } from '@element-plus/icons-vue';

import { useCounter } from '#/utils/chatInjectionState';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
  // 消息位置 判断右侧不显示
  placement: {
    type: String,
    default: '',
  },
  // 翻译内容
  content: {
    type: String,
    default: '',
  },
});
const injectedState = useCounter();

const isLoading = defineModel<Boolean>('isLoading'); // 是否加载
const translateContent = defineModel<string>('translateContent'); // 翻译内容
const translateStatus = defineModel<string>('translateStatus'); // 加载状态
// 各种翻译图标状态
const translateConfig = {
  // 不同翻译图标
  icon: () => {
    if (translateStatus.value === 'noStatus' && isLoading.value === false) {
      return LanguageTranslator;
    }
    if (translateStatus.value === 'delete' && isLoading.value === false) {
      return Delete;
    }
    if (translateStatus.value === 'loading' && isLoading.value === false) {
      return LineLoading;
    }
    return LineLoading;
  },
  // 翻译图标颜色
  color: () => {
    if (translateStatus.value === 'delete' && isLoading.value === false) {
      return 'red';
    }
    return '#626aef';
  },
};
// 翻译按钮点击事件
const translateHandle = async () => {
  // 等待DOM更新后，通知父组件滚动到底部
  injectedState.scrollToBottom(props.id);

  // 删除按钮事件处理
  if (translateStatus.value === 'delete' && isLoading.value === false) {
    translateContent.value = '';
    translateStatus.value = 'noStatus';
    return;
  }
  // // 翻译中事件处理
  if (translateStatus.value === 'loading' && isLoading.value === false) {
    return;
  }
  // deleteCount.value++; // 翻译限制
  translateContent.value = props.content || $t('customer.chat.noOriginText');
  translateStatus.value = 'loading';
  isLoading.value = true;

  setTimeout(() => {
    isLoading.value = false;
  }, 2000);
};
</script>
